<template>
  <div class="deepseek-container">
    <!-- 聊天消息列表 -->
    <div class="chat-messages" ref="messagesContainer">
      <div v-for="(message, index) in messages" :key="index" 
           :class="['message', message.role === 'assistant' ? 'assistant' : 'user']">
        <div class="avatar">
          <div v-if="message.role === 'assistant'" class="deepseek-logo">
            <i class="iconfont icon-deepseek2"></i>
          </div>
          <img v-else src="@/assets/images/avatar.jpg" alt="User">
        </div>
        <div class="message-content">
          {{ message.content }}
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <div class="input-container">
        <textarea
          v-model="userInput"
          @keydown.enter.prevent="handleSend"
          placeholder="输入消息，按Enter发送..."
          rows="1"
        ></textarea>
        <div class="button-group">
          <button class="send-button" @click="handleSend" :disabled="isLoading">
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

const userInput = ref('')
const messages = ref([
  {
    role: 'assistant',
    content: '我是 DeepSeek, 很高兴见到你！我可以帮你写代码、读文件、写作等各种创意内容，请把你的任务交给我吧~'
  }
])
const isLoading = ref(false)
const messagesContainer = ref<HTMLElement | null>(null)

// 发送消息
const handleSend = async () => {
  if (!userInput.value.trim() || isLoading.value) return

  // 添加用户消息
  messages.value.push({
    role: 'user',
    content: userInput.value
  })

  const userMessage = userInput.value
  userInput.value = ''
  isLoading.value = true

  try {
    // 这里替换为实际的 DeepSeek API 调用
    const response = await axios.post('YOUR_DEEPSEEK_API_ENDPOINT', {
      messages: messages.value
    })

    // 添加助手回复
    messages.value.push({
      role: 'assistant',
      content: response.data.message
    })
  } catch (error) {
    console.error('Error:', error)
    messages.value.push({
      role: 'assistant',
      content: '抱歉，发生了一些错误，请稍后再试。'
    })
  } finally {
    isLoading.value = false
    scrollToBottom()
  }
}

// 滚动到底部
const scrollToBottom = () => {
  setTimeout(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  }, 100)
}

onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.deepseek-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  display: flex;
  margin-bottom: 20px;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deepseek-logo {
  width: 100%;
  height: 100%;
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deepseek-logo .iconfont {
  font-size: 24px;
  color: #1a73e8;
}

.message-content {
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 80%;
  line-height: 1.5;
}

.assistant .message-content {
  background: #e3f2fd;
}

.input-area {
  padding: 20px;
  background: white;
  border-top: 1px solid #eee;
}

.input-container {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
  max-height: 150px;
  outline: none;
}

.button-group {
  display: flex;
  gap: 8px;
}

.send-button {
  padding: 12px 20px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.send-button:hover {
  background: #1557b0;
}

.send-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>